// define(function(require) {

var React = require('react');
var Component = React.Component;
var antd = require('antd');
var { Form, Input, DatePicker, Col } = antd;

const FormItem = Form.Item;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 5 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 12 },
  },
};

class manualValidateForm extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <Form>
        <FormItem
          {...formItemLayout}
          label="Fail"
          validateStatus="error"
          help="Should be combination of numbers & alphabets"
        >
          <Input placeholder="unavailable choice" id="error" />
        </FormItem>

        <FormItem
          {...formItemLayout}
          label="Warning"
          validateStatus="warning"
        >
          <Input placeholder="Warning" id="warning" />
        </FormItem>

        <FormItem
          {...formItemLayout}
          label="Validating"
          hasFeedback
          validateStatus="validating"
          help="The information is being validated..."
        >
          <Input placeholder="I'm the content is being validated" id="validating" />
        </FormItem>

        <FormItem
          {...formItemLayout}
          label="Success"
          hasFeedback
          help='如果没有状态，有hasFeedback是不会有图标的，但是也不可以放help'
          validateStatus=""
        >
          <Input placeholder="I'm the content" id="success" />
        </FormItem>

        <FormItem
          {...formItemLayout}
          label="Warning"
          hasFeedback
          validateStatus="warning"
        >
          <Input placeholder="Warning" id="warning" />
        </FormItem>

        <FormItem
          {...formItemLayout}
          label="Fail"
          hasFeedback
          validateStatus="error"
          help="Should be combination of numbers & alphabets"
        >
          <Input placeholder="unavailable choice" id="error" />
        </FormItem>

        <FormItem
          label="inline"
          labelCol={{
            xs: { span: 24 },
            sm: { span: 5 },
          }}
          wrapperCol={{
            xs: { span: 24 },
            sm: { span: 19 },
          }}
          help
        >
          <Col span={6}>
            <FormItem validateStatus="error" help="Please select the correct date">
              <DatePicker />
            </FormItem>
          </Col>
          <Col span={1}>
            <p className="uy-form-split">-</p>
          </Col>
          <Col span={6}>
            <FormItem>
              <DatePicker />
            </FormItem>
          </Col>
        </FormItem>
      </Form>
    )
  }
}

module.exports = manualValidateForm;

// })
    